<template>
  <div class="system-log">
    <div>
      <el-row :gutter="20" type="flex">
        <el-col :span="4"
          ><el-input
            placeholder="请输入账号"
            v-model="listQuery.createAccount"
            clearable
          >
          </el-input
        ></el-col>
        <el-col :span="4"
          ><el-select
            v-model="listQuery.level"
            clearable
            placeholder="日志等级"
            style="width: 100%"
          >
            <el-option label="提示" value="1"></el-option>
            <el-option label="错误" value="2"></el-option>
            <el-option label="警告" value="3"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4"
          ><el-select
            v-model="listQuery.module"
            clearable
            placeholder="业务模块"
            style="width: 100%"
          >
            <el-option
              v-for="item in systemModule"
              :key="item.value"
              :label="item.msg"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>

        <el-col style="float: left; width: 90px">
          <el-button type="custom" plain @click="getList({ page: 1 })"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData" stripe style="width: 100%" max-height="640px">
      <el-table-column prop="createAccount" label="账号" width="140">
      </el-table-column>
      <el-table-column prop="description" label="操作" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="content" label="状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <span :title="scope.row.content">{{
            scope.row.content.substring(0, 20)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="level" label="日志等级" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.level | logLevelStyleFilter">
            {{ scope.row.level | logLevelFrontFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="module" label="业务模块" width="120">
        <template slot-scope="scope">
          {{ scope.row.module | moduleFilter }}
        </template>
      </el-table-column>

      <el-table-column prop="updateTime" label="操作时间" width="180">
      </el-table-column>
      <el-table-column prop="ipAddr" label="IP地址" width="140">
      </el-table-column>
      <div slot="empty" class="emptyBg">
        <el-empty :image-size="200"></el-empty>
      </div>
    </el-table>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>

<script>
import { tbSysLogQuery } from '@/api/admin/system/system-log.js'
export default {
  data() {
    return {
      tableData: [],
      pageObj: {},
      listQuery: {
        page: 1,
        limit: 10,
      },
      systemModule: [
        {
          value: '1',
          msg: '系统',
        },
        {
          value: '4',
          msg: '数据',
        },
      ],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList(data) {
      if (data) {
        Object.assign(this.listQuery, data)
      }
      tbSysLogQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.pageObj = res.data
      })
    },
  },
  filters: {
    //系统日志等级文字
    logLevelFrontFilter(data) {
      switch (data) {
        case '1':
          return '提示'
        case '2':
          return '错误'
        case '3':
          return '警告'
        default:
          return data
      }
    },
    //系统日志等级样式
    logLevelStyleFilter(data) {
      switch (data) {
        case '1':
          return ' '
        case '2':
          return 'danger'
        case '3':
          return 'waring'
        default:
          return ' '
      }
    },
    moduleFilter(data) {
      switch (data) {
        case '1':
          return '系统'
        case '2':
          return '教学'
        case '3':
          return '系统'
        case '4':
          return '数据'
        default:
          return '其他'
      }
    },
  },
}
</script>